<template>
    <div class="maincss">
        <div class="title-box">
            <div class="draw-title">
                {{title}}
            </div>
            <el-form :model="formSubmit" ref="formSubmit" class="mt20" label-width="130px" >
                <el-row :gutter="20">
                <el-col :span="8">
                    <div>下一步选择</div>
                    <el-tree :data="processList" :props="processProps" @node-click="processNodeClick"
                        style='border:1px solid rgb(230, 235, 245);min-height:282px'>
                    </el-tree>
                </el-col>
                <el-col :span="8">
                    <div>待选用户</div>
                    <el-tree :data="userList" :props="userProps" @node-click="userNodeClick"
                        style='border:1px solid rgb(230, 235, 245);min-height:282px'>
                    </el-tree>
                </el-col>
                <el-col :span="8">
                    <div>已选用户</div>
                    <div class="wordbox" style='border:1px solid rgb(230, 235, 245);min-height:282px'>
                        <ul>
                        <li v-for="(item,index) in receiveUserList" :key="index">
                            <div class="inli">
                                <i class="el-icon-s-custom"></i>
                                <span>{{item.name}}</span>
                                <i class="el-icon-close" @click="removeData(item)"></i>
                            </div>
                        </li>
                        </ul>
                    </div>
                </el-col>
                <el-col :span="24" class="mt10" v-if="formSubmit.actDefId == 'EndEvent_0qwgu4i'">
                    <el-form-item label="是否加入观察：" prop="joinObservation" >
                        <el-radio-group v-model="formSubmit.joinObservation">
                            <el-radio :label='true'>是</el-radio>
                            <el-radio :label='false'>否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="24" >
                    <el-form-item label="是否加入档案：" prop="joinDoc" v-if="formSubmit.actDefId == 'EndEvent_0qwgu4i'" >
                        <el-radio-group v-model="formSubmit.joinDoc">
                            <el-radio :label='true'>是</el-radio>
                            <el-radio :label='false'>否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
    
    export default {
        components: {
           
        },
        props: ['data','title'],
        data () {
            return {
                formSubmit:{},
                processList:[],
                processProps: {
                    children: "children",
                    label: "processName"
                },
                userProps: {
                    children: "children",
                    label: "name"
                },
                receiveUserList:[],
                userList:[]
            }
        },
        created(){
          this.getOptionsList()
        },
        mounted() {
        },
        methods: {

            getOptionsList(){
                this.processList =[
                    {
                        processName:'流程1',
                        processId :1
                    },
                    {
                        processName:'流程2',
                        processId :2
                    },
                ]
            },
            //流程节点点击触发 带出可选成员
            processNodeClick(val){
                if(val.processId==1){
                    this.userList=[
                        {
                            name:'徐凤年',
                            id:'1'
                        }
                    ]
                }else{
                   this.userList=[
                        {
                            name:'李淳罡',
                            id:'2'
                        }
                    ] 
                }
            },
            //点击成员 导入可选成员
            userNodeClick(val){
                this.receiveUserList.push(val)
            },
            //移除成员
            removeData(item){
                this.receiveUserList.pop(item)
            }
        }
    }
</script>
